<template>
	<view class="content">
		<f-navbar title="我的商品" fontColor="#333" fontSize="34" bgColor="#fff">
			<view class="u-flex" slot="left">
				<van-icon name="arrow-left" color="#333" size="20" />
			</view>
		</f-navbar>
		<view class="content_box">
			<view class="content_search">
				<view class="search_box">
					<image class="search-icon" src="../../../static/imgs/search_icon.png" mode=""></image>
					<input type="text" :value="searchvalue" @input="onsearch" class="search_input"
						placeholder-class="place_class" placeholder="输入商品名称进行检索">
					<view class="search_btn">
						搜索
					</view>
				</view>
			</view>
			<view class="search1">

			</view>

			<view class="addbtnbox">
				<view class="addbtnboxtop" @click="addgoodsInfo">
					<van-icon class="addbtn" name="add-o" color="#FF7E00" size="20" />
					新增
				</view>

			</view>
			<view class="contentone">


				<scroll-view @scrolltolower="lowerBottom" scroll-y="true" class="scrollHeight"
					:style="{marginTop:0+'rpx'}" :scroll-top="scrollTop" :refresher-threshold="100"
					:refresher-triggered="triggered" :scroll-with-animation="true">
					<view class="content_item" v-for="(item,index) in dataList" :key="index">
						<view class="content_itemtop_title" v-if="item.status==1">
							已上架
						</view>
						<view class="content_itemtop_title1" v-if="item.status==0">
							已下架
						</view>
						<view class="content_info">
							<view class="content_infoimg">
								<image class="content_infoimg1" :src="item.good_img" mode=""></image>
							</view>
							<view class="content_infoTxt">
								<view class="content_infoname">
									{{item.title}}
								</view>
								<view class="content_num">
									<view class="content_numL">
										商品编码
									</view>
									<view class="shengyu1">{{item.code}}</view>
								</view>
								<view class="content_num">
									<view class="content_numL">
										销量：{{item.total_sale_num}}件
									</view>
									<view class="shengyu">剩余库存：{{item.total_stock}}件</view>
								</view>
								<view class="content_iscuxiao">
									促销活动：{{item.activity_id>0?'已设置':'未设置'}}
									<view class="stopbox" v-if="item.activity_state==1" @click="stophongdong(item)">
										停止促销活动
									</view>
								</view>
							</view>
						</view>
						<view class="content_infobtnbox">
							<view class="xiajiabtn" v-if="item.status==1" @click="ongoodsstatus(item)">
								下架该商品
							</view>
							<view class="shangjiabtn" v-if="item.status==0" @click="ongoodsstatus(item)">
								上架该商品
							</view>
							<view class="shezhibtn" @click="shezhi(item)">
								设置促销活动
							</view>
							<view class="bianjibtn" @click="editgoods(item)">
								编辑商品信息
							</view>
						</view>

					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 是否下架 -->
		<van-popup :show="isxiajia" z-index="100" custom-style="border-radius: 10rpx;" round>
			<view class="isxiajiabox">
				<view class="isxiajiaboxtitle">
					该商品是否选择下架？
				</view>
				<view class="isxiajiaboxbottom">
					<view class="isxiajiaboxline">

					</view>
					<view class="isxiajiaboxbtnbox">
						<view class="isxiajiaboxbtnboxL" @click="cancelxiajia">
							取消
						</view>
						<view class="isxiajiaboxbtnboxR" @click="comfirmxiajia">
							确认
						</view>
					</view>
				</view>
			</view>
		</van-popup>

		<!-- 是否下架 -->
		<van-popup :show="ishuodong" z-index="100" custom-style="border-radius: 10rpx;" round>
			<view class="isxiajiabox">
				<view class="isxiajiaboxtitle">
					设置促销活动的商品在
					活动结束前无法修改商
					品信息，是否继续。
				</view>
				<view class="isxiajiaboxbottom">
					<view class="isxiajiaboxline">

					</view>
					<view class="isxiajiaboxbtnbox">
						<view class="isxiajiaboxbtnboxL" @click="cancelhuodong">
							取消
						</view>
						<view class="isxiajiaboxbtnboxR" @click="comfirmhuodong">
							确认
						</view>
					</view>
				</view>
			</view>
		</van-popup>

	</view>
</template>

<script>
	import fNavbar from '@/uni_modules/f-navbar/components/f-navbar/f-navbar.vue';
	import {
		getGoodListByStore,
		setGoodStatus,
		stopActivity
	} from '../../../utils/storeapp.js'
	export default {
		components: {
			fNavbar
		},
		data() {
			return {
				searchvalue: '', //搜索
				imgurl: getApp().globalData.imgurl,
				pages: 1, // 分页数据
				PageSize: 4, // 一页有多少数据
				total: null, // 总条数	
				dataList: [], // 列表数据
				triggered: false, // 设置是否下拉
				scrollTop: 0,
				isxiajia: false, // 是否下架弹窗
				xiajiacode: '', // 下架临时code
				ishuodong: false, // 是否显示活动弹窗
				huodongcode: '', // 设置临时code

			}
		},
		onLoad() {
			this.getList(true)
		},
		methods: {

			//停止活动事件
			stophongdong(e) {
				console.log(e);
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定停止这条促销活动吗？',
					success: function(res) {
						console.log(res);
						if(res.confirm){
							stopActivity({
								code:e.code,
							}).then(res => {
							if(res.code==1){
								uni.showToast({
									title: res.info,
									icon: 'none',
									duration: 2000
								})
								setTimeout(function(){
									that.getList(true)
								},1500)
								
							} else {
								uni.showToast({
									title: res.info,
									icon: 'none',
									duration: 2000
								})
							}
							
							})
						}
					},

				})


			},

			// 取消活动弹窗
			cancelhuodong() {
				this.ishuodong = false
			},
			// 确认活动弹窗
			comfirmhuodong() {
				this.ishuodong = false
				uni.navigateTo({
					url: '/pages/subPack/oddActivity/oddActivity?code=' + this.huodongcode
				})
			},

			// 取消下架弹窗
			cancelxiajia() {
				this.isxiajia = false
			},
			// 确认下架弹窗
			comfirmxiajia() {
				setGoodStatus({
					code: this.xiajiacode,
				}).then(res => {
					console.log(res);
					if (res.code == 1) {
						this.isxiajia = false
						this.getList(true)

					} else {
						uni.showToast({
							title: res.info,
							icon: 'none',
							duration: 2000
						})
					}

				})

			},

			// 设置上下架商品
			ongoodsstatus(e) {
				this.xiajiacode = e.code
				if (e.status == 1) {
					this.isxiajia = true
				} else {
					setGoodStatus({
						code: e.code,
					}).then(res => {
						console.log(res);
						if (res.code == 1) {
							this.getList(true)
						} else {
							uni.showToast({
								title: res.info,
								icon: 'none',
								duration: 2000
							})
						}

					})
				}

			},
			// 编辑商品
			editgoods(e) {
				uni.navigateTo({
					url: '/pages/subPack/goodsInfo/goodsInfo?code=' + e.code
				})
			},
			// 设置活动
			shezhi(e) {
				console.log(e);
				this.huodongcode = e.code
				// if(e.activity_state==1){
				// 	uni.showToast({
				// 		title:'已设置活动',
				// 		icon:'none'
				// 	})
				// } else {

				this.ishuodong = true
				// uni.navigateTo({
				// 	url:'/pages/subPack/oddActivity/oddActivity?code='+e.code
				// })
				// }
			},
			//触底加载
			lowerBottom() {
				// 判断是否还有下一页数据
				// if (this.pages * this.PageSize >= this.total) return person.showMoreData = true
				// 让页码值自增 +1
				// console.log('999');
				// this.pages += 1
				// 重新获取列表数据
				this.getList(false)
			},
			// 下拉刷新
			// getFresh() {
			// 	this.triggered = true,
			// 	this.getList(true)

			// },
			// 获取数据
			getList(isPullDownRefresh) {
				let currPage = 1
				if (!isPullDownRefresh) {
					currPage = this.pages + 1
				} else {
					currPage = 1
				}
				getGoodListByStore({
					title: this.searchvalue,
					page: currPage
				}).then(res => {
					console.log(res);
					if (res.code == 1) {

						uni.hideToast()
						const newdata = res.data.list
						if (isPullDownRefresh) {
							this.dataList = newdata
							this.triggered = false
						} else {
							this.dataList = [...this.dataList, ...newdata]
						}
						this.pages = res.data.page.current
						console.log(this.pages);
						// this.total = res.data.page.total
					} else {
						uni.showToast({
							title: res.info,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			// 添加商品信息
			addgoodsInfo() {
				uni.navigateTo({
					url: '/pages/subPack/goodsInfo/goodsInfo'
				})
			},
			// 搜索
			onsearch(e) {
				this.searchvalue = e.detail.value
				this.getList(true)
			},
		},
	}
</script>

<style>
	page {
		background: #eee;
	}

	.content_search {
		width: 100%;
		height: 110rpx;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		z-index: 99;
	}

	.search_box {
		width: 691rpx;
		height: 65rpx;
		background: #FFFFFF;
		border: 1rpx solid #EF0E6C;
		border-radius: 32rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
	}

	.search_input {
		width: 480rpx;
		padding-left: 88rpx;
	}

	.search-icon {
		width: 36rpx;
		height: 36rpx;
		position: absolute;
		left: 30rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.place_class {
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #BBBBBB;
	}

	.search_btn {
		width: 122rpx;
		height: 64rpx;
		background: #EF0E6C;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FFFFFF;
		line-height: 64rpx;
		text-align: center;
		border-top-right-radius: 32rpx;
		border-bottom-right-radius: 32rpx;
	}

	.search1 {
		height: 110rpx;
		z-index: 99;
	}

	.scrollHeight {
		height: 74vh;
	}

	.addbtnbox {
		width: 100%;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FF7E00;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 40rpx;
		margin-bottom: 40rpx;

	}

	.addbtnboxtop {
		display: flex;
		align-items: center;
		margin: 0 auto;
	}

	.addbtn {
		margin-right: 10rpx;
	}

	.content_item {
		width: 690rpx;
		/* height: 291rpx; */
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-bottom: 20rpx;
		padding-bottom: 20rpx;
	}

	.content_itemtop_title {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FF0000;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-right: 20rpx;
		padding-top: 23rpx;
		box-sizing: border-box;
		margin-bottom: 6rpx;
	}

	.content_itemtop_title1 {
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #bbb;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-right: 20rpx;
		padding-top: 23rpx;
		box-sizing: border-box;
		margin-bottom: 6rpx;
	}

	.content_info {
		display: flex;
		align-items: center;
	}

	.content_infoimg {
		width: 120rpx;
		height: 120rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
		margin-left: 20rpx;
	}

	.content_infoimg1 {
		width: 100%;
		height: 100%;
	}

	.content_infoTxt {
		width: 500rpx;
		/* height: 120rpx; */
	}

	.content_infoname {
		width: 360rpx;
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		line-height: 42rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.content_num {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 10rpx;
	}

	.content_numL {
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #999999;
	}

	.shengyu {
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FF7E00;
	}
	.shengyu1 {
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #999999;
	}

	.content_iscuxiao {
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #999999;
		margin-top: 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.stopbox {
		width: 185rpx;
		height: 45rpx;
		border: 1rpx solid #FF0000;
		border-radius: 10rpx;
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		line-height: 45rpx;
		text-align: center;
	}


	.content_infobtnbox {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-top: 33rpx;

	}

	.xiajiabtn {
		width: 194rpx;
		height: 60rpx;
		background: #FF0000;
		border-radius: 30rpx;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FFFFFF;
		line-height: 60rpx;
		text-align: center;
		margin-right: 22rpx;
	}

	.shangjiabtn {
		width: 194rpx;
		height: 60rpx;
		background: #DDDDDD;
		border-radius: 30rpx;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FFFFFF;
		line-height: 60rpx;
		text-align: center;
		margin-right: 22rpx;
	}

	.shezhibtn {
		width: 194rpx;
		height: 60rpx;
		background: #2BA245;
		border-radius: 30rpx;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FFFFFF;
		line-height: 60rpx;
		text-align: center;
		margin-right: 22rpx;
	}

	.bianjibtn {
		width: 194rpx;
		height: 60rpx;
		background: #FF7E00;
		border-radius: 30rpx;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FFFFFF;
		line-height: 60rpx;
		text-align: center;
		margin-right: 22rpx;
	}

	/* 是否下架弹窗 */
	.isxiajiabox {
		width: 412rpx;
		min-height: 204rpx;
		background: #FFFFFF;
		border-radius: 10rpx !important;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}

	.isxiajiaboxtitle {
		width: 300rpx;
		font-size: 30rpx;
		font-family: Hiragino Sans GB;
		font-weight: 600;
		color: #333333;
		margin-top: 36rpx;
		line-height: 42rpx;

	}

	.isxiajiaboxbottom {
		margin-bottom: 20rpx;
	}

	.isxiajiaboxline {
		width: 412rpx;
		height: 4rpx;
		background-color: #eee;
		margin-bottom: 20rpx;
		margin-top: 30rpx;
		/* border: 2px solid #EEEEEE; */
	}

	.isxiajiaboxbtnbox {
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.isxiajiaboxbtnboxL {
		width: 152rpx;
		height: 52rpx;
		border: 2rpx solid #EF0E6C;
		border-radius: 25rpx;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FF0000;
		line-height: 52rpx;
		text-align: center;
		margin-right: 30rpx;
	}

	.isxiajiaboxbtnboxR {
		width: 150rpx;
		height: 50rpx;
		background: #EF0E6C;
		border-radius: 25rpx;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FFFFFF;
		line-height: 52rpx;
		text-align: center;
	}
</style>